<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
		
		<script>
			var dataset=[150,220,360,450,110,130];
			var height=600;
			var width=600;
			//创建画布
			var svg=d3.select("body")
					  .append("svg")
					  .attr("height",height)
					  .attr("width",width)
					  
					 			
			//设置x轴比例尺
			var fruit=["apple","banana","pear","grape","mango","orange"];
			var xScale=d3.scaleBand()
						 .domain(fruit)
						 .range([0,500]);
			//添加坐标轴
			var xAxis=d3.axisBottom(xScale);
			//添加g元素，并作为参数传递给xAxis
			svg.append("g")
			   .attr("transform","translate(50,500)") //坐标轴生成在x轴方向移动20个像素，y轴方向往下移动500个像素
			   .call(xAxis);
			
			
			//设置y轴比例尺
			var max=d3.max(dataset);
			var yScale=d3.scaleLinear()
						 .domain([0,max])
						 .range([0,500]);			 
			//添加y坐标轴，由于y坐标轴顺序是反的，需要重新定义range
			yScale.range([500,100]);
			var yAxis=d3.axisLeft(yScale)
//						.ticks(15);
			//添加g元素，传递给yAxis
			svg.append("g")
				.attr("transform","translate(50,0)")
				.call(yAxis);		
				
		</script>
		
	</body>
</html>
